<template>

  <div class="tags-view-container">
    <span class="arrow el-icon-arrow-left" @click="moveLeft()"></span>
    <span class="arrow el-icon-arrow-right" @click="moveRight()"></span>
    <scroll-pane class="tags-view-wrapper" ref="scrollPane">
      <div @contextmenu.prevent="openMenu(item, $event)" :class="isActive(item) ? 'active' : ''" class="tags-view-item"
        v-for="(item, index) in tags" :key="index" @click="tagsmenu(item)">
        <span>{{ item.menuname }}</span>
        <!-- stop阻止事件冒泡 -->
        <span class="el-icon-close tagsicon" @click.prevent.stop="handleClose(item, index)"
          v-if="!(item.menuname == '首页')"></span>
        <em class="tags_em"></em>
        <em class="tags_right"></em>
      </div>
    </scroll-pane>
    <ul class="contextmenu" v-show="visible" :style="{ left: left + 'px', top: top + 'px' }">
      <li @click="handleClose(selectedTag)">关闭</li>
      <li @click="cleartags($route.path)">关闭所有</li>
    </ul>

  </div>

</template>

<script>
//这个就是导入vuex的数据，配合下面...map用
import { mapState, mapMutations } from "vuex";
import ScrollPane from "@/components/ScrollPane";
import store from "../vuex/store";
import $ from 'jquery'
const padding = 15 // tag's padding
export default {
  components: { ScrollPane },
  data() {
    return {
      //右键菜单隐藏对应布尔值
      visible: false,
      //右键菜单对应位置
      top: 0,
      left: 0,
      selectedTag: {},
    }
  },
  computed: {
    //引入vuex中state中的tags数据，一样this调用就行
    ...mapState(["tags"]),
  },
  created() {
  },
  watch: {
    //监听右键菜单的值是否为true，如果是就创建全局监听点击事件，触发closeMenu事件隐藏菜单，如果是false就删除监听
    visible(value) {
      if (value) {
        document.body.addEventListener('click', this.closeMenu)
      } else {
        document.body.removeEventListener('click', this.closeMenu)
      }
    }
  },
  updated() {
    if ($(".scroll-wrapper").width() > this.scrollContainerW) {
      $('.arrow').show()
    } else {
      $('.arrow').hide()
    }
  },
  mounted() {
    this.scrollContainerW = $('.scroll-container').width() - 50
  },
  methods: {
    //左右
    moveLeft() {
      var box = $(".scroll-wrapper");
      var flag = "left";
      var w = box.find("div").outerWidth(true);
      console.log(box)
      console.log(w)
      box.animate({ "margin-left": -w } /*,1500,'easeOutBounce'*/, function () {
        box
          .find("div")
          .eq(0)
          .appendTo(box);
        box.css({ "margin-left": 0 });
      });
      flag = "left";
    },
    moveRight() {
      var box = $(".scroll-wrapper");
      var flag = "right";
      var w = box.find("div").outerWidth(true);
      box.find("div:last").prependTo(box);
      box.css({ "margin-left": -w });
      box.animate({ "margin-left": 0 } /*,1500,'easeOutBounce'*/);
      flag = "right";
    },
    //引入vuex中mutation方法，可以直接this.xxx调用他
    ...mapMutations(["closeTab", "cleartagsview"]),
    //点击叉叉删除的事件
    handleClose(item, index) {
      //先把长度保存下来后面用来比较做判断条件
      let length = this.tags.length - 1;
      //vuex调方法,上面...map引入的vuex方法，不会这种方法的看vue官网文档
      this.closeTab(item);
      // 如果关闭的标签不是当前路由的话，就不跳转
      if (item.url !== this.$route.path) {
        return;
      }
      // 判断：如果index和length是一样的，那就代表都是一样的长度，就是最后一位，那就往左跳转一个
      if (index === length - 1) {
        //再判断：如果length=0，也就是说你删完了所有标签
        if (length === 0) {
          //那么再判断：如果当前路由不等于index，也就是我首页的路由
          if (this.$route.path !== "/myIndex/indexEchart") {
            //那么就跳转首页。这一步的意思是：如果删除的最后一个标签不是首页就统一跳转首页，如果你删除的最后一个标签是首页标签，已经在这个首页路由上了，你还跳个什么呢。这不重复操作了吗。
            this.$router.push({ path: "/myIndex/indexEchart" });
          }
        } else {
          //那么，如果上面的条件都不成立，没有length=0.也就是说你还有好几个标签，并且你删除的是最后一位标签，那么就往左边挪一位跳转路由
          this.$router.push({ path: this.tags[index - 1].url });
        }
      } else {
        // 如果你点击不是最后一位标签，点的前面的，那就往右边跳转
        this.$router.push({ path: this.tags[index].url });
      }
    },
    //点击跳转路由
    tagsmenu(item) {
      //判断：当前路由不等于当前选中项的url，也就代表你点击的不是现在选中的标签，是另一个标签就跳转过去，如果你点击的是现在已经选中的标签就不用跳转了，因为你已经在这个路由了还跳什么呢。
      if (this.$route.path !== ('/' + item.url)) {
        //用path的跳转方法把当前项的url当作地址跳转。
        this.$router.push({ path: '/' + item.url });//跳到当前点击的路由
      }
    },
    //通过判断路由一致返回布尔值添加class，添加高亮效果
    isActive(route) {
      return route.url === this.$route.path || route.menuname === this.$route.name;
    },
    //右键事件，显示右键菜单，并固定好位置。
    openMenu(tag, e) {
      this.visible = true
      this.selectedTag = tag
      const offsetLeft = this.$el.getBoundingClientRect().left
      this.left = e.clientX - offsetLeft //右键菜单距离左边的距离
      this.top = e.clientY - 60;//右键菜单距离上面的距离  
    },
    //隐藏右键菜单
    closeMenu() {
      this.visible = false
    },
    //右键菜单关闭所有选项，触发vuex中的方法，把当前路由当参数传过去用于判断
    cleartags(val) {
      this.cleartagsview(val)
    }
  },
};
</script>

<style scoped>
/* //标签导航样式 */
.scroll-container {
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  width: 100%;
}

.tags-view-container {
  position: relative;
}

.arrow {
  position: absolute;
  top: 0;
  z-index: 33;
  width: 25px;
  height: 45px;
  line-height: 45px;
  text-align: center;
  color: #004894;
  font-size: 15px;
  cursor: pointer;
  background: #e2eaf6;
  display: none;
}

.el-icon-arrow-left {
  left: 0px;
}

.el-icon-arrow-right {
  right: 0px;
}

.tags-view-item:first-of-type {
  margin-left: 15px;
}

.tags-view-wrapper {
  background: rgba(255, 255, 255, 1);
  height: 45px;
  line-height: 42px;
}

.tags-view-item {
  cursor: pointer;
  display: inline-block;
  position: relative;
  line-height: 28px;
  color: #333333;
  padding: 0 9px 0 5px;
  font-size: 12px;
  transition: 0.3s;
}

.tags_em {
  margin-left: 10px;
  animation: tags .3s ease;
  border: 0.5px solid #eceaea;
  width: 100%;
}

@keyframes tags {
  from {
    width: 0;
  }

  to {
    width: 100%;
  }
}

/* //叉号鼠标经过样式 */
.tagsicon:hover {
  color: #f56c6c;

}

/* //标签高亮 */
.active {
  color: #004894;
}

/* //右键菜单样式 */
.contextmenu {
  margin: 0;
  background: #fff;
  z-index: 100;
  position: absolute;
  list-style-type: none;
  padding: 5px 0;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 400;
  color: #333;
  box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
}

.contextmenu li {
  margin: 0;
  padding: 7px 16px;
  cursor: pointer;
}

.contextmenu li:hover {
  background: #eee;
}
</style>
